import React, { Component } from "react";

class Child extends Component<any, any>{
    click = () => {
        // console.log(this.props)
        this.props.fn('123456')
    }
    render(): React.ReactNode {
        return (
            <fieldset>
                <legend>子组件</legend>
                <button onClick={this.click}>点击</button>
            </fieldset>
        )
    }
}

// 流程
// 1.父组件传递方法给子组件
// 2.子组件接收并调用
// 3.子组件调用传递实参
// 4.父组件函数通过形参接收

class Parent extends Component<{ fn: (p: string) => void }, any>{
    state = {
        message: ""
    }
    Child = React.createRef<Child>()
    handleClick = (param: any) => {
        // console.log(param)
        this.setState({
            message: param
        })
    }
    render(): React.ReactNode {
        return (
            <fieldset>
                <legend>父组件</legend>
                <h1>一个父组件</h1>
                <Child ref={this.Child} fn={this.handleClick} />
                <button>点击</button>
                <h1>{this.state.message}</h1>
            </fieldset>
        )
    }
}

export default Parent